<template>
  <div class="big_box">
    <div style="flex: 0 1 25%;height: 50%">
      <dv-border-box1 ref="borderRef">
        <div style="width:100%;height: 50% !important;" h18rem color-white flex justify-center items-center>
          <div dv-bg style="padding-top: 3rem">
            <dv-capsule-chart :config="config" style="width:100%;height:100%" />
          </div>
        </div>
      </dv-border-box1>
      <dv-border-box1 ref="borderRef">
        <div style="width:100%;height: 50% !important;" h18rem color-white flex justify-center items-center>
          <div dv-bg style="padding-top: 3rem">
            <dv-capsule-chart :config="config" style="width:100%;height:100%" />
          </div>
        </div>
      </dv-border-box1>
    </div>
    <div style="flex: 0 1 50%">
      <dv-border-box11 title="大屏vue3"  :animate="true">

      </dv-border-box11>
    </div>
    <div style="flex: 0 1 25%;height: 50%;">
      <dv-border-box3>
        <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center" dv-bg>
<!--          <div s>-->
            <dv-percent-pond :config="config1" style="width:200px;height:100%;" />          </div>
<!--        </div>-->
      </dv-border-box3>
      <dv-border-box3>
        <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center" dv-bg>
<!--          <div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%" small-bg>-->
            <dv-decoration-12 :color="['#fc97a9']" style="width:150px;height:100%;" />
<!--          </div>-->
        </div>
      </dv-border-box3>
    </div>
  </div>



</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue'
//柱状图数据
const config = reactive({
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '万元',
  labelNum: 8,
  // showValue:true,
})
// 电池数据
const config1 = reactive({
  value: 66,
  localGradient: true,
})
</script>
<style scoped lang="scss">

</style>